<script setup>
import {ref} from 'vue'
import CountButton from './CountButton.vue'

const msg = ref('')

//enter抬起回调
const enterHandler = ()=>{
    console.log('enter被按抬起')
}

//enter按下调用，如果不抬起会一直调用多次
const enterDownHandler = ()=>{
    console.log('enter被按下')
}

const deleteHandler = ()=>{
    console.log('delete被调用',msg.value)
}

const tabHandler = ()=>{
    console.log('tab被调用')
}

const ctrlHandler = (e)=>{
    console.log('ctrl+s被调用')
}

//只有按住ctrl再点击才有效果
const v = ref(0)
const ctrlClick = ()=>{
    console.log('ctrl+s被调用')
}

const rightClickHandler = ()=>{
    console.log("点击了右键")
}

const childCntChangeHandler = (value)=>{
    console.log("参数",value)
}
</script>

<template>
    <h3>键盘enter事件</h3>
    <input type="text" v-model="msg" @keyup.enter = "enterHandler" @keydown.enter="enterDownHandler">
    <h3>删除时间</h3>
    <input type="text" v-model="msg"  @keyup.delete="deleteHandler">
    <h3>tab事件</h3>
    <input type="text" v-model="msg"  @keydown.tab="tabHandler">
    <h3>ctrl事件</h3>
    <input type="text" v-model="msg"  @keyup.ctrl.enter="ctrlHandler">
    <h3>ctrl点击</h3>
    <button @click.ctrl="v++">{{ v }}</button>
    <div>
    <textarea @click.right="rightClickHandler" oncontextmenu="return false">123</textarea>
    <textarea @contextmenu.prevent="rightClickHandler">123</textarea>
    <CountButton :step="2"/>
    <CountButton :step="4" @cnt-change="childCntChangeHandler"/>
</div>
</template>